<template>
    <div class="login-form">
 
        <div class="title">账号登录
            <img class="code" src="@/assets/images/code.jpg" alt="">
        </div>
        <el-form  ref="ruleFormRef"   :model="ruleForm" :rules="rules" label-width="auto" class="ruleForm">
            <el-form-item label="" prop="username">
                <el-input v-model="ruleForm.username" size="large" placeholder="请输入账号">
                    <template #prefix>
                        <span class="icon iconfont icon-touxiang"></span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label=""  prop="pass">
                <el-input  type="password" show-password v-model="ruleForm.pass" placeholder="请输入密码">
                <template #prefix>
                    <span class="icon iconfont icon-password"></span>
                </template>
                </el-input>
            </el-form-item>

            <el-form-item label=""   prop="verifyCode">
                <el-input v-model="ruleForm.verifyCode" style="flex:1" placeholder="请输入验证码" >
                    <template #prefix>
                    <span class="icon iconfont icon-password"></span>
                </template>
                </el-input>
                <img class="vcode" @click="getverifyCodeData" :src="verifyCodeData.imageCode" alt="" srcset="">
            </el-form-item>

            <el-form-item label="">
                <el-button @click="submit" style="width: 100%;" type="primary">登录</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { Administrator, VerifyCode } from '@/apis/administrator/type';
import { FormInstance, FormRules } from 'element-plus';
import { getverifyCode} from '@/apis/administrator/administrator';
import { useRouter } from 'vue-router';
import { useAdminStore } from '@/store';

const adminStore = useAdminStore();

const router = useRouter();

const ruleFormRef = ref<FormInstance>()

const verifyCodeData=ref<VerifyCode>({
    imageCode:"",
    token:""
})

const ruleForm = reactive<Administrator>({
    username: "",
    pass: "",
    verifyCode: "",
    token: ""
})

const rules = reactive<FormRules<Administrator>>({
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}
)

const postData=async ()=>{

    // const res=await login(ruleForm);

    // console.log("登录结果",res);

    // sessionStorage.setItem("token",res.data.token);
    
    // sessionStorage.setItem("menu", JSON.stringify(res.data.menu));

    // router.push("/");

    const res=await adminStore.userLogin(ruleForm);

    console.log("登录结果",res);

    if(res) router.push("/");

 



//调接口
}

const submit=()=>{

    ruleFormRef.value?.validate(
        async (valid) => { 
            if(valid){
                postData();
            }
       }
  )
    // alert('登录成功')
}

const getverifyCodeData=async ()=>{

  const res=  await getverifyCode();
  verifyCodeData.value=res.data;
  ruleForm.token=res.data.token;
 
}

getverifyCodeData();

</script>
<style scoped lang='less'>
.login-form {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;



    .title {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;

        .code {
            position: absolute;
            height: 50px;
            width: 50px;
            right: 0;

        }
    }

    .ruleForm {
        width: 100%;

        padding: 30px 30px;
        box-sizing: border-box;

        .vcode {
            height: 44px;
            margin-left: 20px;
        }
    }

    .icon-touxiang{
        font-size: 20px;
    margin-left: -6px;
    }

}

:deep .el-input__inner {
    height: 44px !important;
}

:deep .el-button--primary {
    height: 44px !important;
}
</style>